<!DOCTYPE html>
<meta charset="utf-8">
<title>getComputedStyle() inherits visibility across shadow boundaries</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- regression test for https://github.com/jsdom/jsdom/issues/3941 -->

<div id="shadow-root" style="visibility:visible;"></div>

<script>
"use strict";

const shadowRoot =
  document.querySelector("#shadow-root").attachShadow({ mode: "open" });

test(() => {
  shadowRoot.innerHTML = `
    <div class="container">
      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>
    </div>
  `;

  const innerEl = document.querySelector("#shadow-root").shadowRoot
    .querySelector(".shadow-element-with-inline-style");
  assert_equals(window.getComputedStyle(innerEl).visibility, "visible", "initial value");

  shadowRoot.innerHTML = `
    <div class="container" style="visibility:hidden;">
      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>
    </div>
  `;

  const innerEl2 = document.querySelector("#shadow-root").shadowRoot
    .querySelector(".shadow-element-with-inline-style");
  assert_equals(window.getComputedStyle(innerEl2).visibility, "hidden", "updated value");
}, "Sanity check");

test(() => {
  shadowRoot.innerHTML = `
    <div class="container">
      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>
    </div>
  `;

  const innerEl = document.querySelector("#shadow-root").shadowRoot
    .querySelector(".shadow-element-with-inline-style");
  assert_equals(window.getComputedStyle(innerEl).visibility, "visible", "initial value");

  shadowRoot.host.style.visibility = "hidden";
  assert_equals(window.getComputedStyle(innerEl).visibility, "hidden", "updated value");
}, "toggle shadowRoot.host visibility");

</script>
